<template>
  <view class="article-detail-page">
    <!-- 导航栏（固定样式，不随滚动变化） -->
    <view class="navbar">
      <view class="navbar-left" @click="navigateBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <view class="navbar-title">
        心理科普
      </view>
      <view class="navbar-right" @click="onShare">
        <uni-icons type="share" size="24" color="#333"></uni-icons>
      </view>
    </view>

    <!-- 文章内容容器 -->
    <scroll-view class="article-scroll" scroll-y enhanced show-scrollbar="false" @scroll="onScroll">
      <!-- 文章头部封面 -->
      <view class="article-header" v-if="article.coverImage">
        <image class="article-cover" :src="article.coverImage" mode="widthFix" alt="文章封面图"></image>
      </view>

      <!-- 文章主体内容 -->
      <view class="article-container">
        <!-- 文章标题 -->
        <view class="article-title">{{ article.title }}</view>

        <!-- 作者信息栏 -->
        <view class="author-bar">
          <image class="author-avatar" :src="article.authorAvatar" mode="widthFix" alt="作者头像"></image>
          <view class="author-info">
            <view class="author-name">{{ article.authorName }}</view>
            <view class="publish-meta">
              <text>{{ article.publishDate }}</text>
              <text class="meta-divider">·</text>
              <text>{{ article.readTime }}</text>
              <text class="meta-divider">·</text>
              <text>{{ article.readCount }}阅读</text>
            </view>
          </view>
          <button class="follow-btn" v-if="!article.isFollowed">关注</button>
          <button class="followed-btn" v-else>已关注</button>
        </view>

        <!-- 富文本内容（使用mp-html） -->
        <view class="article-content">
          <mp-html :content="article.htmlContent" :lazy-load="true" :filter="safe" @img-click="handleImgClick"
            @link-click="handleLinkClick" :style="richTextStyle"></mp-html>
        </view>

        <!-- 文章标签 -->
        <view class="article-tags" v-if="article.tags && article.tags.length">
          <view class="tag-item" v-for="(tag, index) in article.tags" :key="index">
            {{ tag }}
          </view>
        </view>

        <!-- 点赞收藏栏 -->
        <view class="article-actions">
          <view class="action-item" :class="{ active: article.isLiked }" @click="toggleLike">
            <uni-icons type="heart" size="24" :color="article.isLiked ? '#ff4d4f' : '#666'"></uni-icons>
            <text>{{ article.likeCount }}</text>
          </view>
          <view class="action-item" :class="{ active: article.isCollected }" @click="toggleCollect">
            <uni-icons type="star" size="24" :color="article.isCollected ? '#faad14' : '#666'"></uni-icons>
            <text>{{ article.collectCount }}</text>
          </view>
          <view class="action-item" @click="onShare">
            <uni-icons type="redo" size="24" color="#666"></uni-icons>
            <text>分享</text>
          </view>
        </view>

        <!-- 相关推荐 -->
        <!-- <view class="related-articles" v-if="relatedArticles.length">
          <view class="section-title">相关推荐</view>
          <view class="related-item" v-for="(item, index) in relatedArticles" :key="index" @click="gotoArticle(item.id)">
            <view class="related-content">
              <view class="related-title">{{ item.title }}</view>
              <view class="related-meta">
                <text>{{ item.author }}</text>
                <text class="meta-divider">·</text>
                <text>{{ item.readTime }}</text>
              </view>
            </view>
            <image 
              class="related-image" 
              :src="item.image" 
              mode="widthFix"
              :alt="item.title"
            ></image>
          </view>
        </view> -->

        <!-- 底部留白 -->
        <view class="bottom-space"></view>
      </view>
    </scroll-view>

    <!-- 回到顶部按钮（修复显示异常） -->
    <!-- <view class="float-action" :class="{ 'float-visible': isFloatVisible }" @click="backToTop">
      <uni-icons type="arrowup" size="24" color="#fff"></uni-icons>
    </view> -->
  </view>
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'

export default {
  components: {
    mpHtml
  },
  data() {
    return {
      // 滚动状态（仅用于控制回到顶部按钮）
      scrollTop: 0,
      isFloatVisible: false,

      // 文章数据
      article: {
        title: "如何通过日常习惯改善心理健康",
        coverImage: "https://picsum.photos/id/1068/1000/500",
        authorName: "平台编辑",
        authorAvatar: "https://picsum.photos/id/64/100/100",
        publishDate: "2023-10-15",
        readTime: "5分钟",
        readCount: "2.3k",
        isFollowed: false,
        tags: ["心理健康", "日常习惯", "情绪管理"],
        isLiked: false,
        likeCount: 128,
        isCollected: false,
        collectCount: 56,
        htmlContent: `
          <p>在现代快节奏的生活中，越来越多的人开始关注自己的心理健康。事实上，通过一些简单的日常习惯调整，我们可以有效改善心理状态，提升生活质量。</p>
          
          <h3>一、保持规律的作息时间</h3>
          <p>睡眠对心理健康有着直接影响。研究表明，长期睡眠不足会导致焦虑和抑郁情绪加重。建议成年人每天保持7-8小时的睡眠时间，并尽量在固定时间上床和起床。</p>
          
          <figure>
            <img src="https://picsum.photos/id/1060/800/400" alt="规律作息有助于心理健康">
            <figcaption>规律的作息是心理健康的基础</figcaption>
          </figure>
          
          <h3>二、适度运动释放压力</h3>
          <p>运动时，大脑会分泌内啡肽，这种化学物质能让人感到愉悦，缓解压力。即使是每天30分钟的步行，也能显著改善情绪状态。</p>
          
          <blockquote>
            "运动是最好的心理医生。每周至少进行150分钟的中等强度有氧运动，能有效预防和缓解轻度抑郁。"
          </blockquote>
          
          <h3>三、培养正念冥想习惯</h3>
          <p>正念冥想可以帮助我们专注于当下，减少对过去的懊悔和对未来的担忧。初学者可以从每天5分钟开始，逐渐增加到15-20分钟。</p>
          
          <ul>
            <li>找一个安静的环境，舒适地坐下</li>
            <li>专注于自己的呼吸，感受气息的进出</li>
            <li>当注意力分散时，温和地将其拉回呼吸</li>
          </ul>
          
          <img src="https://picsum.photos/id/1058/800/400" alt="正念冥想练习">
          
          <h3>四、建立良好的社交关系</h3>
          <p>人是社会性动物，良好的人际关系对心理健康至关重要。定期与家人朋友交流，参与社交活动，能有效降低孤独感和焦虑感。</p>
          
          <p>需要注意的是，这些方法只能作为日常心理保健使用。如果出现严重的心理问题，应及时寻求专业心理咨询师或医生的帮助。</p>
        `
      },

      // 相关文章
      relatedArticles: [
        {
          id: 1,
          title: "10分钟冥想指南：初学者入门技巧",
          author: "张心理咨询师",
          readTime: "4分钟",
          image: "https://picsum.photos/id/1059/300/200"
        },
        {
          id: 2,
          title: "情绪管理：如何应对工作压力",
          author: "李医生",
          readTime: "6分钟",
          image: "https://picsum.photos/id/1070/300/200"
        }
      ],

      // mp-html 样式配置（重点调整了间距和文字颜色）
      richTextStyle: `/* 通用文本样式 */
.--rich-text-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.8;
  color: #333;
  padding: 12px;
}

/* 段落样式 */
.--rich-text-wrapper p {
  margin-bottom: 1.2em;
  text-indent: 2em;
}

/* 标题样式 */
.--rich-text-wrapper h1 {
  font-size: 22px;
  font-weight: bold;
  margin: 25px 0 15px;
  position: relative;
  padding-left: 12px;
}
.--rich-text-wrapper h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 4px;
  background-color: #4285f4;
  border-radius: 2px;
}

.--rich-text-wrapper h2 {
  font-size: 20px;
  border-left: 4px solid #4285f4;
  padding-left: 12px;
  margin: 20px 0 12px;
}

.--rich-text-wrapper h3 {
  font-size: 18px;
  margin: 17px 0 10px;
  position: relative;
  padding-left: 8px;
}
.--rich-text-wrapper h3::before {
  content: "•";
  color: #4285f4;
  position: absolute;
  left: 0;
}

/* 图片样式 */
.--rich-text-wrapper img {
  max-width: 100%;
  height: auto !important;
  margin: 15px auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 链接样式 */
.--rich-text-wrapper a {
  color: #4285f4;
  text-decoration: none;
  border-bottom: 1px solid rgba(66, 133, 244, 0.3);
  padding-bottom: 2px;
}
.--rich-text-wrapper a:active {
  color: #ea4335;
}

/* 列表样式 */
.--rich-text-wrapper ul,
.--rich-text-wrapper ol {
  padding-left: 1.5em;
  margin: 12px 0;
}
.--rich-text-wrapper li {
  margin-bottom: 8px;
  position: relative;
}

/* 引用样式 */
.--rich-text-wrapper blockquote {
  background: #f8f9fa;
  border-left: 4px solid #d6e2ff;
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #666;
}

/* 代码样式 */
.--rich-text-wrapper pre {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  font-family: 'Consolas', 'Courier New', monospace;
  margin: 15px 0;
  line-height: 1.4;
  font-size: 14px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.--rich-text-wrapper code {
  background-color: #f2f2f2;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 90%;
}

/* 表格样式 */
.--rich-text-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.--rich-text-wrapper th {
  background-color: #f5f7ff;
  font-weight: bold;
}
.--rich-text-wrapper th, 
.--rich-text-wrapper td {
  padding: 12px 15px;
  border: 1px solid #e1e4e8;
  text-align: left;
}
.--rich-text-wrapper tr:nth-child(even) {
  background-color: #fafafa;
}

/* 分隔线 */
.--rich-text-wrapper hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(66,133,244,0.5), rgba(0,0,0,0));
  margin: 25px 0;
}`
    };
  },
  methods: {
    // 处理滚动事件（仅用于控制回到顶部按钮）
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      // 滚动超过500px显示回到顶部按钮
      this.isFloatVisible = this.scrollTop > 500;
    },

    // 回到顶部
    backToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },

    // 图片点击事件
    handleImgClick(e) {
      const { src, urls } = e.detail;
      uni.previewImage({
        current: src,
        urls: urls,
        indicator: 'default'
      });
    },

    // 链接点击事件
    handleLinkClick(e) {
      const { href } = e.detail;
      e.preventDefault(); // 阻止默认行为
      // 处理内部链接和外部链接
      if (href.startsWith('/')) {
        uni.navigateTo({
          url: href
        });
      } else {
        uni.navigateTo({
          url: `/pages/webview/index?url=${encodeURIComponent(href)}`
        });
      }
    },

    // 切换点赞状态
    toggleLike() {
      this.article.isLiked = !this.article.isLiked;
      this.article.likeCount += this.article.isLiked ? 1 : -1;
      // 添加点赞动画
      const likeBtn = this.$el.querySelector('.action-item:nth-child(1)');
      if (likeBtn) {
        likeBtn.classList.add('like-animation');
        setTimeout(() => likeBtn.classList.remove('like-animation'), 500);
      }
    },

    // 切换收藏状态
    toggleCollect() {
      this.article.isCollected = !this.article.isCollected;
      this.article.collectCount += this.article.isCollected ? 1 : -1;
    },

    // 分享文章
    onShare() {
      uni.showShareMenu({
        withShareTicket: true
      });
    },

    // 跳转到相关文章
    gotoArticle(id) {
      uni.navigateTo({
        url: `/pages/article/detail?id=${id}`
      });
    },

    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  },
  onShareAppMessage() {
    return {
      title: this.article.title,
      path: `/pages/article/detail?id=${this.article.id}`,
      imageUrl: this.article.coverImage
    };
  }
};
</script>

<style scoped lang="scss">
.article-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

// 导航栏样式（固定不变）
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: #fff;
  /* 固定白色背景 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* 固定阴影 */
  z-index: 999;

  .navbar-left,
  .navbar-right {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;

    &:active {
      background-color: rgba(0, 0, 0, 0.05);
    }
  }

  .navbar-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    /* 固定文字颜色 */
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// 滚动容器
.article-scroll {
  padding-top: 48px;
}

// 文章头部封面
.article-header {
  position: relative;

  .article-cover {
    width: 100%;
    height: auto;
    display: block;
  }
}

// 文章内容容器
.article-container {
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  margin-top: -24px;
  padding: 24px 16px 16px;
  position: relative;
  z-index: 10;
}

// 文章标题
.article-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.4;
  margin-bottom: 20px;
  /* 增加标题底部间距 */
  padding-bottom: 20px;
  /* 增加标题底部内边距 */
  border-bottom: 1px solid #f1f1f1;
}

// 作者信息栏
.author-bar {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  /* 增加作者栏底部间距 */

  .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .author-info {
    flex: 1;

    .author-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
    }

    .publish-meta {
      font-size: 13px;
      color: #999;

      .meta-divider {
        margin: 0 6px;
      }
    }
  }

  .follow-btn {
    background-color: #3498db;
    color: #fff;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 1.4;
  }

  .followed-btn {
    background-color: #f5f5f5;
    color: #666;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 1.4;
  }
}

// 文章内容区域（增加整体内边距）
.article-content {
  margin-bottom: 30px;
  /* 增加内容区域底部间距 */
  padding: 0 8px;
  /* 增加左右内边距，让文字不贴边 */

  .mp-html-content {
    // 为富文本内容添加额外间距
  }
}

// 文章标签
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  /* 增加标签栏底部间距 */
  padding-top: 20px;
  /* 增加标签栏顶部内边距 */
  border-top: 1px dashed #f1f1f1;

  .tag-item {
    background-color: #f5f7fa;
    color: #4a6fa5;
    font-size: 13px;
    padding: 5px 14px;
    border-radius: 16px;
    transition: all 0.2s;

    &:active {
      background-color: #e4e9f2;
    }
  }
}

// 文章操作按钮
.article-actions {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 36px;
  /* 增加操作栏底部间距 */
  padding: 20px 0;
  /* 增加操作栏上下内边距 */
  border-top: 1px dashed #f1f1f1;
  border-bottom: 1px dashed #f1f1f1;

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;

    &:active {
      transform: scale(0.95);
    }

    &.active {
      text {
        color: #ff4d4f;
      }
    }

    text {
      margin-top: 6px;
    }
  }
}

// 点赞动画
.like-animation {
  animation: likePulse 0.5s ease;
}

@keyframes likePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

// 相关推荐
.related-articles {
  margin-bottom: 30px;
  /* 增加相关推荐底部间距 */

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    /* 增加标题底部间距 */
    padding-bottom: 8px;
    border-bottom: 2px solid #f5f5f5;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 40px;
      height: 2px;
      background-color: #3498db;
    }
  }

  .related-item {
    display: flex;
    margin-bottom: 20px;
    /* 增加相关文章间距 */
    padding: 12px;
    border-radius: 8px;
    background-color: #f9f9f9;
    transition: background-color 0.2s;

    &:last-child {
      margin-bottom: 0;
    }

    &:active {
      background-color: #f0f0f0;
    }

    .related-content {
      flex: 1;
      margin-right: 12px;

      .related-title {
        font-size: 15px;
        color: #333;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 8px;
      }

      .related-meta {
        font-size: 12px;
        color: #999;

        .meta-divider {
          margin: 0 4px;
        }
      }
    }

    .related-image {
      width: 100px;
      height: 70px;
      border-radius: 6px;
      object-fit: cover;
    }
  }
}

// 底部留白（增加高度）
.bottom-space {
  height: 50px;
}

// 回到顶部按钮（修复显示异常）
.float-action {
  position: fixed;
  bottom: 30px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
  z-index: 998;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  /* 隐藏时不可点击 */
  transition: all 0.3s ease;

  &.float-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* 显示时可点击 */
  }
}
</style>
